<template>
    <div>
        <van-nav-bar title="首页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-search v-model="value" shape="round" background="red" placeholder="请输入搜索关键词" @click="bth" />
        <swiper :images="images"></swiper>
        <van-grid :column-num="5">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <van-grid :column-num="5">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <span style="width: 100%;height: 20px;background: salmon;">
            京东秒杀 01：40：41 发现好货
        </span>
        <div class="till">
            <div style="width: 100%;height: 200px;background: palegreen;">
                <img src="../../img/1.png" alt="">
                ￥8999
            </div>
            <div style="width: 100%;height: 200px;background: palegreen;">
                <img src="../../img/1.png" alt="">
                ￥8999
            </div>
             <div style="width: 100%;height: 200px;background: palegreen;">
                <img src="../../img/1.png" alt="">
                ￥8999
            </div>
             <div style="width: 100%;height: 200px;background: palegreen;">
                <img src="../../img/1.png" alt="">
                ￥8999
            </div>
        </div>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
import { ref } from 'vue';
import swiper from '@/components/swiper.vue';
import { useRouter } from 'vue-router';
let router = useRouter('')
let bth = () => {
    router.push('/ss')
}
import { catitemsApi } from '@/api/api'
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res);
    catitems.value = res.data.message
})
</script>

<style lang="scss" scoped>
 .till{
    column-count: 2;
    column-gap: 20px;
    div{
        width: 100%;
        margin-bottom: 60px;
    }
    img{
        width: 100%;
    }
 }
</style>